<template>
  <div class="page-teacher_detail">
    <div class="heacher"></div>
    <div class="user-info">
      <div class="avatar">
        <img v-if="teacherInfo.avatar" :src="teacherInfo.avatar" alt="" />
        <img v-else src="/img/pc/default-avatar.png" alt="" />
      </div>
      <div class="teacher-name">{{ teacherInfo.acName }}</div>
      <div class="nickname">
        <img src="/img/pc/teacher-jiang.png" alt="" />
        <div class="name">{{ teacherInfo.designation }}</div>
      </div>
      <div class="desc">简介：{{ teacherInfo.ftIntroduce }}</div>
    </div>
    <div class="teacher_detail_container">
      <div class="course" v-if="courseList.length > 0">
        <div class="title">老师课程（共{{ courseList.length }}个）</div>
        <div class="course-list">
          <course-card
            v-for="(item, index) in courseList"
            :key="index"
            :detail="item"
            :is_member="is_member"
            :user_member="user_member"
            :memberDiscount="memberDiscount"
          ></course-card>
        </div>
      </div>
      <!-- <div class="teacher" v-if="teacherList.length > 0">
        <div class="title">名师推荐</div>
        <div class="list-box">
          <div
            class="list-item"
            v-for="(item, index) in teacherList"
            :key="index"
            :style="{ marginRight: (index + 1) % 3 == 0 ? '0' : '30px' }"
          >
            <div class="item-left">
              <div class="avatar">
                <img v-if="item.avatar" :src="item.avatar" alt="" />
                <img v-else src="/img/pc/default-avatar.png" alt="" />
              </div>
            </div>
            <div class="item-right">
              <div class="t-name">{{ item.acName }}</div>
              <div class="t-school">
                <img src="/img/pc/teacher-jiang.png" alt="" />
                <div class="teacher-info">{{ item.designation }}</div>
              </div>
              <div class="t-desc">简介：{{ item.ftIntroduce }}</div>
            </div>
          </div>
        </div>
      </div> -->
    </div>
  </div>
</template>

<script>
import CourseCard from "~/components/pc/CourseCard.vue";
import { mapState, mapActions, mapMutations } from "vuex";
import { getTeacherDetail } from "~/api/teacher";
import { getMemberInfo, getMember } from "~/api/member";
import { getTeacherZone } from "~/api/teacher";
export default {
  data() {
    return {
      page: 1,
      pageSize: 9,
      total: 0,
      teacherInfo: {},
      courseList: [],
      teacherList: [],
      memberDiscount: {}
    };
  },
  computed: {
    ...mapState({
      user_info(state) {
        return state.user_info;
      },
      token(state) {
        return state.token;
      },
      is_member(state) {
        return JSON.stringify(state.member_info) != "{}";
      },
      user_member(state) {
        return state.member_info;
      }
    })
  },
  watch: {},
  components: {
    CourseCard
  },
  methods: {
    ...mapMutations(["SET_IS_LOADING"]),
    ...mapActions(["initMember"]),
    toPath(path) {
      this.$router.push(path);
    },
    async getMemberInfo() {
      this.SET_IS_LOADING(true);
      console.log("=============执行1");
      if (Object.keys(this.user_info).length > 0) {
        console.log("=============执行2");
        let result = await getMemberInfo(this.user_info.id);
        if (result && result.data && result.data.code == 200) {
          this.memberDiscount = result.data.data;
        } else {
          this.$Message.error(this.$t("locale.pc.index.t9"));
        }
      } else {
        this.memberDiscount = {};
      }
      this.SET_IS_LOADING(false);
    },
    trimDate(date) {
      if (date) {
        let _date = new Date(date);
        var year = _date.getFullYear();
        var month = _date.getMonth() + 1;
        var date = _date.getDate();
        var hours = _date.getHours();
        var minutes = _date.getMinutes();
        if (month < 10) {
          month = "0" + month;
        }
        if (date < 10) {
          date = "0" + date;
        }
        if (hours < 10) {
          hours = "0" + hours;
        }
        if (minutes < 10) {
          minutes = "0" + minutes;
        }
        return year + "." + month + "." + date + " " + hours + ":" + minutes;
      } else {
        return this.$t("locale.pc.mytest.testTrain.unknow");
      }
    },
    linkTo(path) {
      this.$router.push({
        path
      });
    },
    handleChangePage(page) {
      this.page = page;
      this.getData();
    },
    async getThreeTeacherList() {
      this.SET_IS_LOADING(true);
      let params = {
        offset: 0,
        limit: 3
      };
      let result = await getTeacherZone(params);
      if (result && result.data && result.data.code == 200) {
        this.SET_IS_LOADING(false);
        this.teacherList = result.data.data.rows;
      } else {
        this.SET_IS_LOADING(false);
      }
    },
    async getData() {
      this.SET_IS_LOADING(true);
      let teacherId = this.$route.query.id;
      let result = await getTeacherDetail(teacherId);
      console.log("老师详情", result.data.data);
      if (result && result.data.code == 200) {
        this.teacherInfo = result.data.data;
        this.courseList = result.data.data.courseList;
        this.SET_IS_LOADING(false);
      } else {
        this.SET_IS_LOADING(false);
        
      }
    }
  },
  created() {
    this.getThreeTeacherList();
    this.getData();
    this.getMemberInfo();
    this.initMember();
  }
};
</script>

<style lang="scss">
.page-teacher_detail {
  width: 100%;
  height: 100%;
  display: inline-block;
  //   background-color: #f2f2f2;
  background: #ffffff;
  .heacher {
    width: 100%;
    height: 200px;
    background-image: linear-gradient(-45deg, #252526 0%, #494b4c 100%),
      linear-gradient(#5b96ff, #5b96ff);
    background-blend-mode: normal, normal;
  }
  .user-info {
    width: 1200px;
    margin: 0 auto;
    position: relative;

    .avatar {
      position: absolute;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 180px;
      height: 180px;
      border-radius: 50%;
      background-color: #adafb3;
      border: solid 2px #ffffff;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
        display: block;
      }
    }
    .teacher-name {
      padding-top: 100px;
      text-align: center;
      font-size: 28px;
      font-weight: bold;
      line-height: 48px;
      color: #313233;
    }
    .nickname {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      font-weight: bold;
      line-height: 48px;
      color: #7c7d80;
      img {
        width: 25px;
        height: 23px;
        display: block;
        margin-right: 10px;
      }
    }
    .desc {
      width: 600px;
      min-height: 90px;
      margin: 0 auto 30px;
      font-size: 20px;
      font-weight: bold;
      line-height: 33px;
      color: #adafb3;
    }
  }
  .teacher_detail_container {
    background-color: #f2f2f2;
    .course {
      width: 1200px;
      margin: 0 auto;
      .title {
        font-size: 20px;
        font-weight: bold;
        color: #666666;
        padding: 30px 10px;
      }
      .course-list {
        display: flex;
        flex-wrap: wrap;
      }
    }
    .teacher {
      width: 1200px;
      margin: 0 auto;
      .title {
        font-size: 30px;
        font-weight: bold;
        color: #666666;
        padding: 30px 10px;
      }
      .list-box {
        display: flex;
        flex-wrap: wrap;
        // justify-content: space-between;
        .list-item {
          width: 380px;
          height: 280px;
          background-color: #ffffff;
          border-radius: 10px;
          margin-bottom: 30px;
          margin-right: 30px;
          display: flex;
          .item-left {
            width: 170px;
            height: 280px;
            .avatar {
              width: 121px;
              height: 121px;
              background-color: #adafb3;
              border: solid 4px #ffffff;
              border-radius: 50%;
              margin: 26px auto 0;
              overflow: hidden;
              img {
                display: block;
                width: 100%;
                height: 100%;
              }
            }
          }
          .item-right {
            width: 210px;
            height: 280px;
            padding-top: 30px;
            padding-right: 10px;
            .t-name {
              font-size: 26px;
              font-weight: bold;
              line-height: 48px;
              color: #313233;
            }
            .t-school {
              display: flex;
              align-items: center;
              margin-top: 10px;
              img {
                width: 25px;
                height: 23px;
                display: block;
                margin-right: 10px;
              }
              .teacher-info {
                font-size: 22px;
                font-weight: bold;
                color: #7c7d80;
              }
            }
            .t-desc {
              margin-top: 20px;
              font-size: 16px;
              line-height: 27px;
              color: #adafb3;
              display: -webkit-box;
              -webkit-line-clamp: 4;
              overflow: hidden;
              text-overflow: ellipsis;
              -webkit-box-orient: vertical;
            }
          }
        }
      }
    }
  }
}
</style>
